@import "../../../colors";
@import "../../../frameless";

.overflow-hidden {
    /* to avoid double scroll bars this
    gets added to body while modal is open */
    overflow: hidden;
}

.modal-content {
    position: relative;
    margin: 3.75rem auto;
    border-radius: 1rem;
    box-shadow: 0 0 0 4px $ui-white-15percent;
    background-color: $ui-white;
    padding: 0;
    width: 48.75rem;

    &:focus {
        outline: none;
    }

    @media #{$intermediate-and-smaller} {
        margin-top: 0;
        width: 100%;
        overflow: auto;
    }

    @media #{$small}, #{$small-height} {
        border-radius: 0;
        box-shadow: none;
        height: 100%;
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 510;
    background-color: transparentize($ui-blue, .3);
}

$modal-close-size: 1rem;
.modal-content-close {
    position: absolute;
    top: $modal-close-size * 0.5;
    right: $modal-close-size * 0.5;
    border-radius: $modal-close-size;
    background-color: $active-dark-gray;
    cursor: pointer;
    width: $modal-close-size * 2;
    height: $modal-close-size * 2;
    text-align: center;
    line-height: $modal-close-size * 2;
}

.modal-content-close-img {
    padding-top: $modal-close-size * 0.5;
}

/* Close button, Submit button, etc. */
.action-buttons {
    display: flex;
    margin: 1.125rem .8275rem .9375rem .8275rem;
    line-height: 1.5rem;
    justify-content: flex-end !important;
    align-items: flex-start;
    flex-wrap: nowrap;

    @media #{$intermediate-and-smaller} {
        justify-content: center !important; //overwriting flex row properties
        flex-direction: row !important;
    }
}

/* setting overall modal to contain overflow looks good, but isn't
compatible with elements (like validation popups) that need to bleed
past modal boundary. This class can be used to force modal button
row to appear to contain overflow. */
.action-buttons-overflow-fix {
    margin-bottom: .9375rem;
}

/* For action button row where left/right margin is handled by parent element */
.action-buttons.action-buttons-no-inset {
    margin-left: 0;
    margin-right: 0;
}

.action-button {
    margin: 0 0 0 .54625rem;
    border-radius: .25rem;
    padding: 6px 1.25rem 14px 1.25rem;
    height: 36px;
}

.action-button.close-button {
    border: 1px solid $active-gray;
}

.action-button-text {
    display: flex;
}

.action-button.disabled {
    background-color: $active-dark-gray;
}

.error-text
{
    display: block;
    border: 1px solid $active-gray;
    border-radius: 5px;
    background-color: $ui-orange;
    padding: 1rem;
    min-height: 1rem;
    overflow: visible;
    color: $type-white;
}

.modal-sizes * {
    box-sizing: border-box;
}

.modal-sizes {
    margin: 100px auto;
    outline: none;
    padding: 0;
    max-width: 36.25rem; /* 580px; */
    user-select: none;

    @media #{$medium}, #{$medium-height} {
        margin: 40px auto;
    }

    @media #{$small}, #{$small-height} {
        margin: 0 auto;
        width: auto;
    }

    .modal-header {
        padding-top: .75rem;
        width: 100%;
        height: 3rem;

        @media #{$small}, #{$small-height} {
            border-radius: 0;
        }
    }

    .modal-content {
        font-size: .875rem;
    }
}
